import { useState } from "react";
import Style from "./NcTips.module.css";
import IconClose from "../../assets/close.svg";

function Header(props) {
  return (
    <div className={Style.Header}>
      <span>提示</span>
      <img src={IconClose} alt="" onClick={props.cancel} />
    </div>
  );
}

function Content() {
  return (
    <div className={Style.Content}>
      <span>
        为保障平台的数据安全和您的账号安全，需要验证您的数字安全密码。
      </span>
      <span>您当前暂未设置数字安全密码，请先设置。</span>
    </div>
  );
}

function Footer(props) {
  return (
    <div className={Style.Footer}>
      <span onClick={props.confirm}>设置安全密码</span>
      <span onClick={props.cancel}>取 消</span>
    </div>
  );
}

function NcTips(props) {
  const [animation, setAnimation] = useState("fadeInDown");

  const cancel = () => {
    setAnimation("fadeOutDown");
    setTimeout(() => {
      props.close();
    }, 250);
  };

  const confirm = () => {
    setAnimation("fadeOutDown");
    setTimeout(() => {
      props.confirm();
    }, 250);
  };

  return (
    <div className={`${Style.NcTips} ${animation}`}>
      <div className={`${Style.Box} ${animation + "Y"}`}>
        <Header cancel={cancel} />
        <Content />
        <Footer confirm={confirm} cancel={cancel} />
      </div>
    </div>
  );
}

export default NcTips;
